logoutuseLogout<script setup lang="ts">
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
import { Iphone, Lock } from '@element-plus/icons-vue'
import { getAgreementDetail, usePasswordLogin, getSendMessage } from '@fl/api/user-api'
import Footer from '@/components/footer.vue'
import Header from '@/user-layout/components/header.vue'

const { push } = useRouter()
const { isPending: isPendingLogin, mutateAsync } = usePasswordLogin()
const ruleFormRef = ref<FormInstance>()
const mobileReg = /^1[3-9]\d{9}$/ 
const ruleForm = ref({
  phone: '',
  smsCode: ''
})
const state = reactive({
  // 倒计时
  countDownTime: 59,
  timer: null,
  countDownIng: false,
})
const rules = reactive<FormRules<RuleForm>>({
    phone: [
        { required: true, message: '请输入手机号', trigger: 'blur' },
    ],
  smsCode: [
    {
      required: true,
      message: '请输入密码',
      trigger: 'blur',
    },
  ],
})
const checked = ref(false)
const visible = ref(false)
const titleDialog = ref('')
const pdfUrl = ref('')
const agreementData = {
    userService: '',
    privacyPolicy: ''
}
const loading = ref(false)

getAgreement()
function getAgreement() {
    getAgreementDetail().then((res) => {
        agreementData.value = {
            userService: res[3].agreementUrl,
            privacyPolicy: res[1].agreementUrl
        }

    })
}

function getCode() {
    if(!mobileReg.test(ruleForm.value.phone)) {
        ElMessage.error('请输入正确的手机号')
        return
    } 
    if(state.countDownIng) return
    loading.value = true
    getSendMessage({phone: ruleForm.value.phone}).then(res=>{
        state.countDownIng = true
        loading.value = false
        state.timer = setInterval(() => {
            state.countDownTime--
            state.getCodeDisabled = true
            state.countDownIng = true
            if (state.countDownTime <= 0) {
            clearInterval(state.timer)
            state.countDownTime = 59
            state.countDownIng = false
            }
      }, 1000)
    }).catch(err=>{
        loading.value = false
    })
}

async function login() {
    if(checked.value && mobileReg.test(ruleForm.value.phone) && ruleForm.value.smsCode) {
        const result = await mutateAsync(ruleForm.value)
        if (result) {
            checked.value = false
            ElMessage.success('登录成功')
            push('/')
        }
    }
}

function inputHandler(val,type) {
    setTimeout(() => {
        console.log(ruleForm.value.phone)
            if(type === 'phone') ruleForm.value.phone = val.replace(/[^\d]/g, '')
            else ruleForm.value.smsCode = val.replace(/[^\d]/g, '')
    }, 0)
}

function previewPdf(type) {
    visible.value = true
    titleDialog.value = type === 'userService' ? '安居链用户服务协议' : '安居链隐私政策'
    pdfUrl.value = type === 'userService' ? agreementData.value.userService : agreementData.value.privacyPolicy
}



</script>

<template>
   <div class="user-login">
      <Header />
      <div class="login-content">
            <div class="login-form">
                <div class="content-form">
                    <h2>手机登录</h2>
                    <el-form
                        ref="ruleFormRef"
                        style="max-width: 600px"
                        :model="ruleForm"
                        label-width="auto"
                        size="large"
                        status-icon
                        @keyup.enter="login"
                    >
                        <el-form-item prop="phone">
                            <div class="form-input">
                                <el-input v-model="ruleForm.phone" :maxlength="11" @input="(val)=>inputHandler(val,'phone')" placeholder="请输入手机号" />
                                <el-icon class="icon" size="16px" color="#C9CDD4"><Iphone /></el-icon>
                            </div>
                        </el-form-item>
                        <el-form-item prop="smsCode">
                            <div class="form-input">
                                <el-input v-model="ruleForm.smsCode" :maxlength="6" @input="(val)=>inputHandler(val,'code')" placeholder="请输入验证码" />
                                <el-icon class="icon"  color="#C9CDD4" size="16px"><Lock /></el-icon>
                                <div :class="state.countDownIng ? 'code-text code-btn' : 'code-btn'" @click="getCode" v-loading="loading">{{ state.countDownIng ? `${state.countDownTime}s后重新获取` : '获取验证码' }}</div>
                            </div>
                        </el-form-item>
                        <div class="check-agreement">
                            <el-checkbox v-model="checked" />
                            <p class="agreement-text">我已阅读并接受<span @click="previewPdf('userService')">《安居链用户服务协议》</span>及<span @click="previewPdf('privacyPolicy')">《安居链隐私政策》</span></p>
                        </div>
                        <div :class="checked && mobileReg.test(ruleForm.phone) && ruleForm.smsCode ? 'login-btn' : 'login-btn disabled'" v-loading="isPendingLogin" @click="login">登录</div>
                    </el-form>
                </div>
            </div>
      </div>
      <Footer />
      <el-dialog v-model="visible" fullscreen append-to-body>
            <template #header>
            <p class="dialogheader">{{ titleDialog }}</p>
            </template>
            <iframe :src="pdfUrl" width="100%" height="800px;" />
        </el-dialog>
   </div>
</template>

<style lang="scss" scoped>
.user-login {
    .login-content {
        position: relative;
        width: 100%;
        height: calc(100vh - 246px);
        background-image: url('/assets/login_bg.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
        > .login-form {
            position: absolute;
            top: 13%;
            left: 50%;
            margin-left: -224px;
            width: 448px;
            height: 352px;
            border-radius: 16px;
            background-color: #FFFFFF;
            box-shadow: 0px 2px 16px 0px rgba(103, 27, 27, 0.15);
            .content-form {
                padding: 40px;
                > h2 {
                    font-size: 24px;
                    font-weight: 600;
                    line-height: 36px;
                    color: #1D2129;
                    margin-bottom: 32px;
                }
                .form-input {
                    width: 100%;
                    position: relative;
                    :deep(.el-input__inner) {
                        padding-left: 30px;
                        font-size: 16px;
                        // color: #C9CDD4;
                    }
                    .icon {
                        position: absolute;
                        top: 14px;
                        left: 16px;
                    }
                    .code-btn {
                        position: absolute;
                        top: 8px;
                        right: 16px;
                        font-size: 14px;
                        height: 26px;
                        line-height: 26px;
                        cursor: pointer;
                        &.code-text {
                            color: #C9CDD4;
                            cursor: not-allowed;
                        }
                    }
                }
                .check-agreement {
                    padding-top: 12px;
                }
                .login-btn {
                    width: 100%;
                    height: 40px;
                    border-radius: 4px;
                    color: #fff;
                    background-color: var(--el-color-primary);
                    font-size: 16px;
                    text-align: center;
                    line-height: 40px;
                    cursor: pointer;
                    &.disabled {
                        opacity: 0.3;
                    }
                }
                :deep(.el-input-group__append) {
                    background-color: transparent;
                    cursor: pointer;
                }
                .code-btn {
                    color: var(--el-color-primary);
                    font-size: 14px;
                }
                .check-agreement {
                    display: flex;
                    align-items: center;
                    .agreement-text {
                        padding-left: 8px;
                        font-size: 12px;
                        color: #4E5969;
                        >span {
                            text-decoration: underline;
                            cursor: pointer;
                        }
                    }
                }
            }
        }
    }
}
</style>
